<template>
  <div>
    <div class="top">
      <div class="left">
        <!-- <div class="logoArea">
          <img
            src="./images/logo.png"
            style="width: 200px; height: 180px; margin: 100px 20px 10px 180px"
            alt=""
          />
        </div> -->
        <div class="login">
          <!--flex弹性盒子模型，justify-content：主抽 -->
          <div
            style="
              display: flex;
              margin:120px 0 220px 120px;
            "
          >
            <div > 
              <el-card    class="loginCard"       style="width: 350px;">
                <div slot="header" class="clearfix">
                  <span><h1 style="margin-left:80px">账号登录</h1></span>
                </div>


                <el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm"> 
          <el-form-item label="用户名" :label-width="formLabelWidth"  prop="userName">
            <el-input
              placeholder="请输入账号"
              v-model="user.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth"  prop="userPassword">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="user.userPassword"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth"  prop="employee_position">
            <el-select
   v-model="user.employee_position"
   placeholder="选择员工职位"
  @click.native="getUser"
   data-options="editable:false"
   value='text'
 >
      <el-option v-model="roleList"
   >
   </el-option>  

 </el-select>
           
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
             v-on:click="doLogin(user)"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
              </el-card>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <Ht></Ht> 
         <!--  <div class="qrcode"
         ref="qrCodeUrl"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import axios from '../../axios';
import Ht from './ht.vue'
import {initDynamicRoutes} from '@/router'
import ht from '../../layout/components/ht.vue';
export default {
  inject:['reload'],
  components: { Ht },

  // retuendata:{
  //     data:'',
  //     code:'',
  //     msg:'',
  //     }
  //   },
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return {
      //之前是在里面直接写username，password等等，但是这里要写return
      //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
      //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
      //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
      //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
      //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
      //二维码
     user: {
        userPassword: "",
        userName: "",
        employee_position:''
        //为了登录方便，可以直接在这里写好用户名和密码的值
      },
      formLabelWidth:'120px',
      loading:false,
      roleList:[],
      retuendata: {
        data: "",
        code: "",
        msg: "",
        //为了登录方便，可以直接在这里写好用户名和密码的值
      },
      rules: {
          userName: [
            { required: true, message: '请输入员工的账号', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
          ],
          userPassword: [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
            { min: 4, max: 8, message: '长度在 4到 8个字符', trigger: 'blur' }
          ],
          // 注意这里
          employee_position: [
        { required: true, message: '请选择用户的职位', trigger: 'change' }
            
          ],
        } 
    };
  },
  methods: {
   
  
     role1(){
      axios({
        url:'/getRole',
        method:"get",
        params:{
          userName:this.user.userName
        }
    }).then(res=>{
       console.log(res);
        this.roleList=res.data.data;
        console.log(this.roleList);
    }).catch(err=>{
      //  console.log(err.response)
     this.$alert(err.response.data.msg, "请联系管理员", {
          confirmButtonText: '确定',
          callback: action => {
          }
        }); 
    })
    },
    getUser(){
      if(this.user.userName!=''){
      console.log(this.user.userName);
      this.role1()
      }else{
          this.$message.error('你输入的用户名为空！')
      }
    },
submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    doLogin(user) {
      this.loading=true,
      console.log(this.user);
      //一点击登录按钮，这个方法就会执行
      const name = this.user.userName;
      const role = this.user.employee_position;

      this.$refs.user.validate((valid) => {
          if (valid) {
  axios({
        method: "POST",
        url: "/user/login",
        data: JSON.stringify(this.user),
        headers: {
          "Content-Type": "application/JSON",
        },
      }).then((res) => {
        console.log(res);
        //将用户信息存入vuex,
        this.$store.commit('setRole',role);
        this.$store.commit('setUsername',name);
        sessionStorage.setItem('token',role+'-token')
        //缺少了token
          localStorage.setItem("currentUser_name", name);
          localStorage.setItem("Authorization", res.headers.authorization);
          //根据用户所具备的权限 动态添加路由规则
          
          if(sessionStorage.getItem('role')==='盘查员'){
          const data =[
        {
            id:1,
            authName:'仓库管理',
            children:[
                {
                    id:11,
                    authName:'盘查处理',
                    path:'chuli',
                    rights:['view','edit','add','delete']
                }
            ]
        }
    ]
    this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
          }
          if(sessionStorage.getItem('role')==='经理'){
          const data =[
    {
        id:1,
        authName:'物流管理',
      
     
        children:[{
            id:11,
            authName:'入库查看',
            path:'totalCheck',
            rights:['view']
        },
        {
            id:12,
            authName:'出库查看',
            path:'outputCheck',
         
            rights:['view']
        }
    
    ]
    },
     {
        id:2,
        authName:'货物管理',
        children:[{
            id:21,
            authName:'查看',
            path:'check',
          
            rights:['view']
        }]
    },
    {
        id:3,
        authName:'仓库管理',
        children:[{
            id:31,
            authName:'盘查查看',
            path:'chakan',
            rights:['view']
        }]
    },
    {
        id:4,
        authName:'员工管理',
        children:[{
            id:41,
            authName:'处理',
            path:'handle2',
            rights:['view','edit','add','delete']
        }]
    }
         ]
         this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
          }
          if(sessionStorage.getItem('role')==='技术管理员'){
          const data =[
    {
        id:1,
        authName:'技术管理',
        children:[
            {
                id:11,
                authName:'数据导出',
                path:'Backup',
               
                rights:['view','edit','add','delete']
            },
            {
                id:12,
                authName:'数据导入',
                path:'Recover',
           
                rights:['view','edit','add','delete']
            },
            {
                id:13,
                authName:'恢复默认',
                path:'Default',
                  
                rights:['view','edit','add','delete']
            }
        ]
    }
]
    this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
          }
           if(sessionStorage.getItem('role')==='货物管理员'){
          const data =[
    {
        id:1,
        authName:'货物管理',
     

        children:[
            {
                id:11,
                authName:'处理',
                path:'handle',
               
                rights:['view','edit','add','delete']
                
            }
        ]
    }
]
    this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
          }
          if(sessionStorage.getItem('role')==='入库员'){
     const data =[
        {
        id:1,
        authName:'物流管理',
        children:[
            {
                id: 11,
                authName:'入库员',
                path:'theFirstInput',
                rights:['view','edit','add','delete']
            },
           
        ]
    }
]
  this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
          }
          if(sessionStorage.getItem('role')==='入库核验员'){
            const data =[
    {
        id:1,
        authName:'物流管理',
        children:[
            {
                id: 11,
                authName:'入库核验员',
                path:'totalCheck',
                rights:['view','edit','add','delete']
            }
        ]
    }
]
 this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home') 
          }
          if(sessionStorage.getItem('role')==='出库员'){
            const data =[
                {
        id:1,
        authName:'物流管理',
       
      
        children:[{
            id:11,
            authName:'出库员',
            path:'output',
          
            rights:['view','edit','add','delete']
            
        }]
    },
]
 this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home') 
          }
           if(sessionStorage.getItem('role')==='出库核验员'){
             const data = [
               
    {
        id:1,
        authName:'物流管理',

     
        children:[{
            id:11,
            authName:'出库核验',
            path:'outputCheck',
           
            rights:['view','edit','add','delete']
        }]
    }
             ]
              this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home') 
           }
           if(sessionStorage.getItem('role')==='环境管理员'){
             const data = [
               
    {
        id:1,
        authName:'仓库管理',
     
       
        children:[
            {
                id:11,
                authName:'仓库肉类',
                path:'meat',
                show: true,
                rights:['view','edit','add','delete']
            },
            {
                id:12,
                authName:'仓库果蔬类',
                path:'fruit',
                rights:['view','edit','add','delete']
            },
            {
                id:13,
                authName:'仓库加工类',
                path:'process',
              
                rights:['view','edit','add','delete']
            },
            {
                id:14,
                authName:'仓库蛋类',
                path:'egg',
              
                rights:['view','edit','add','delete']
            }

        ]
    }
             ]
              this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home') 
           }
           if(sessionStorage.getItem('role')==='超级管理员'){
             const data = [
                {
            id:1,
            authName:'物流管理',
            children:[{
                id:11,
                authName:'入库员',
                path:'theFirstInput',
                rights:['view','edit','add','delete']
            },
            {
            id: 12,
                authName:'入库核验员',
                path:'totalCheck',
                rights:['view','edit','add','delete']
        },
      {
        id:13,
        authName:'出库员',
        path:'output',
        rights:['view','edit','add','delete']
        
      },
      {
        id:14,
        authName:'出库核验员',
        path:'outputCheck',
        rights:['view','edit','add','delete']
      }
      ]
        },
        {
            id:2,
            authName:'货物管理',
            children:[{
                id:21,
                authName:'查看',
                path:'check',
                rights:['view']
            },
        {
            id:22,
            authName:'处理',
            path:'handle',
            rights:['view','edit','add','delete']
        }]
        },
        {
        id:3,
        authName:'仓库管理',
        children:[
            {
                id:31,
                authName:'仓库肉类',
                path:'meat',
                show: true,
                rights:['view','edit','add','delete']
            },
            {
                id:32,
                authName:'仓库果蔬类',
                path:'fruit',
                rights:['view','edit','add','delete']
            },
            {
                id:33,
                authName:'仓库加工类',
                path:'process',
                rights:['view','edit','add','delete']
            },
            {
                id:34,
                authName:'仓库蛋类',
                path:'egg',
                rights:['view','edit','add','delete']
            },
             {
                id:35,
                authName:'盘查查看',
                path:'chakan',
                rights:['view','edit','add','delete']
            },
            {
                id:35,
                authName:'盘查记录',
                path:'chuli',
                rights:['view','edit','add','delete']
            }
        ]
        },
        {
            id:4,
            authName:'员工管理',
            children:[{
                id:41,
                authName:'处理',
                path:'handle2',
                rights:['view','edit','add','delete']
            },
            {
                id:42,
                authName:'查看',
                path:'check2',
                rights:['view','edit','add','delete']
            }
            ]
        },
       {
         id:5,
         authName:'技术管理',
         children:[
             {
                 id:51,
                 authName:'数据导出',
                 path:'Backup',
                
                 rights:['view','edit','add','delete']
             },
             {
                 id:52,
                 authName:'数据导入',
                 path:'Recover',
            
                 rights:['view','edit','add','delete']
             },
             {
                 id:53,
                 authName:'恢复默认',
                 path:'Default',
                 rights:['view','edit','add','delete']
             }
         ]
       }
             ]
             this.$store.commit('setRightList',data);
    console.log('eeeee');
     initDynamicRoutes();
     console.log('dddd');
    this.$router.push('/home')
           }
      }).catch(error=>{
        this.loading=false
        console.log(error);
       this.$alert(error.response.data.msg, '错误', {
          confirmButtonText: '确定',
          callback: action => {
            
          }
        
        });
      });
          }else {
            this.loading=false
            this.$alert('表格中输入的信息与格式不符合，请重新校验！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
            return false;
          }
      });
      },
    
  }
  }

</script>

<style lang="less" scoped>
/deep/input::-webkit-input-placeholder {
  color: rgb(102, 184, 72);
  font-weight:bold;
  font-size: 15px;
}
/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #186607;
  font-weight:bold;
  font-size: 20px;
}
/deep/.el-button{
  background-color: rgba(255,255,255,0.5);
  font-weight: bold;
      font-size: 20px;
      color: rgb(20, 23, 19);
  }
 /deep/.el-card__body{
   height: 250px;
 }
 /deep/.el-form-item__label{
font-size: 20px;
font-weight: bold;
 }
.top {
  width: 1114px;
    margin: 0 auto;
    overflow: hidden;
  background-image: url(./images/login.jpg);
  background-size: cover;
  background-color: #0d5d13;
  display: flex;
  width: 1200px;
  height: 630px;
  

  .left {
    .login{
      .loginCard{
       width: 100%;
        border:1px solid  transparent;
        border-radius: 10px;
        padding-right: 30px;
        /* 为其整体设置接近透明的效果*/
        background-color: rgba(255,255,255,0.2);
        /* 设置box-shadow使其有立体感 */
        box-shadow: 1px 1px 0 0  rgba(0,0,0,0.2);
        position: relative;
        left: -15px;

    }
    tr
    td{
       font-weight: bold;
      font-size: 20px;
    
    }
  
   
span{
  font-weight: bold;
      font-size: 20px;
}
    .logoArea {
      .logo {
        width: 300px;
        height: 300px;
      }
    }
  }
  
}
.right {
    display: flex;
    margin: 100px 0px 0px 520px;
    width: 150px;
    height: 400px;

   .qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
   /*  .btn{
     margin-right: 0px;
      position: absolute
    } */
    /* .qrcode{
     width: 180px;;
    } */
  }
}
</style>